<template>
  <ElDialog
    v-model="dialogVisible"
    :title="props.importText"
    width="35%"
    :before-close="close"
    @close="close"
  >
    <slot name="extra" />
    <div class="extra" @click="uploadClick">
      <SvgIcon name="down" size="18" />
      <span>导入模板下载</span>
    </div>
    <el-upload
      v-bind="$attrs"
      drag
      :accept="props.accept"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :http-request="httpRequest"
    >
      <div>
        <img class="el-upload-icon" src="@/assets/upload/upload.png" alt="" />
        <div class="el-upload__text">
          <span>{{ props.tip }}</span>
        </div>
        <div class="el-upload_accept">
          <span>支持扩展名：</span>
          <span>{{ props.accept }}</span>
        </div>
      </div>
      <template #tip>
        <slot name="tip"></slot>
      </template>
    </el-upload>
    <ElRow style="margin-top: 10px">
      <span style="color: #67c23a">{{ msg }}</span>
    </ElRow>
    <ElRow justify="end" style="margin-top: 20px">
      <slot name="footer">
        <ElButton @click="close">关闭</ElButton>
      </slot>
    </ElRow>
  </ElDialog>
  <ElButton style="margin-left: 10px" @click="show" v-bind="$attrs">
    {{ props.importText }}</ElButton
  >
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { uploadExcelProps, uploadEmits } from './props'
import { SvgIcon } from '@/components'

import { appConfig } from '@/config'

import type { UploadProps as ElUploadProps } from 'element-plus'
import { ElMessage } from 'element-plus'

import { exportFileStream } from './hooks'

const props = defineProps(uploadExcelProps)
const emit = defineEmits(uploadEmits)

const dialogVisible = ref(false)
const msg = ref('')

const show = () => {
  msg.value = ''
  dialogVisible.value = true
}

const beforeUpload = () => {
  // if (!props.data.flag) {
  //     ElMessage({
  //         type: 'warning',
  //         message: '导入方式不能为空'
  //     })
  //     return false
  // }
  return true
}

const httpRequest: ElUploadProps['httpRequest'] = (options) => {
  const { file } = options
  // 请求上传接口
  const formdata: any = new FormData()
  formdata.append(props.httpFileKey, file)

  if (Object.entries(props.data)) {
    Object.entries(props.data).forEach(([key, value]) => {
      formdata.append(key, value)
    })
  }

  return props
    .http(formdata)
    .then((res: any) => {
      msg.value = res?.data || '导入失败'
      ElMessage.success(`${res?.data}`)
      // close()
      emit('reload')
    })
    .catch(() => {
      ElMessage.error('批量导入失败')
    })
}

const uploadClick = () => {
  if (typeof props.templateUrl === 'string') {
    window.open(appConfig.baseApiUrl + props.templateUrl)
  } else if (typeof props.templateUrl === 'function') {
    props.templateUrl()
  } else {
    exportFileStream(() => props.excelExportHttp(props.exportData))
  }
}

const close = () => {
  dialogVisible.value = false
  emit('cancel')
}

defineOptions({
  name: 'ImportExcel'
})
</script>

<style scoped lang="scss">
.el-upload-icon {
  width: 45px;
  height: 45px;
}
.el-upload__text {
  margin-top: 20px;
  margin-bottom: 10px;
}
.extra {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  color: #1890ff;
  &:hover {
    cursor: pointer;
  }
  span {
    padding-left: 10px;
  }
}
</style>
